<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>表格下载</title>
    <link rel="stylesheet" href="../../lib/vant/index.css">
    <link rel="stylesheet" href="../../lib/swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="../../css/main.css">
</head>
<body>
<div class="views" id="formsDownloadPage" v-cloak>
    <!-- 顶部导航 -->
    <div class="main-header-wrap">
        <van-popup class="main-popup" v-model="showNav" :overlay="false">
            <div class="main-nav">
                <dl class="nav-item">
                    <dt class="item-hd">
                        <a href="../index.html">· 首页</a>
                    </dt>
                </dl>
                <dl class="nav-item">
                    <dt class="item-hd">
                        <a href="../enterprise_service.html">· 企业服务</a>
                    </dt>
                    <dd class="item-bd">
                        <a class="van-hairline--bottom van-hairline--right" href="../enterprise_service/dispatching_service.html">人事外包</a>
                        <a class="van-hairline--bottom" href="../enterprise_service/personnel_agency.html">代理服务</a>
                        <a class="van-hairline--bottom van-hairline--right" href="../enterprise_service/recruitment.html">招聘服务</a>
                        <a class="van-hairline--bottom" href="../enterprise_service/employee_benefits.html">人事福利</a>
                        <a class="van-hairline--right" href="../enterprise_service/consulting.html">咨询服务</a>
                        <a class="" href="../enterprise_service/workforce_experts.html">职场专家</a>
                    </dd>
                </dl>
                <dl class="nav-item">
                    <dt class="item-hd">
                        <a href="../staff_service.html">· 员工服务</a>
                    </dt>
                    <dd class="item-bd">
                        <a class="van-hairline--bottom van-hairline--right" href="../staff_service/staff_enrolling.html">员工入职</a>
                        <a class="van-hairline--bottom van-hairline--right" href="../staff_service/employee_turnover.html">员工离职</a>
                        <a class="van-hairline--right" href="../staff_service/staff_management.html">员工管理</a>
                        <a class="" href="../staff_service/faq_download.html">常见问题及表格下载</a>
                    </dd>
                </dl>
                <dl class="nav-item">
                    <dt class="item-hd">
                        <a href="../job.html">· 招聘求职</a>
                    </dt>
                    <dd class="item-bd">
                        <a class="van-hairline--right" href="../job/headhunting.html">猎头岗位</a>
                        <a class="" href="../job/hotjobs.html">热招职位</a>
                    </dd>
                </dl>
                <dl class="nav-item">
                    <dt class="item-hd">
                        <a href="../government_solutions.html">· 政策服务</a>
                    </dt>
                </dl>
                <dl class="nav-item">
                    <dt class="item-hd">
                        <a href="../about_us.html">· 关于我们</a>
                    </dt>
                </dl>
            </div>
        </van-popup>
        <div class="main-header flex" :class="{'bg-white': !showNav}">
            <a href="../index.html" class="logo" style="background-image: url(../../images/logo.png)"></a>
            <span class="menu" @click="showPopup">
            <em :class="{'close': showNav}"></em>
            <div>{{showNav ? 'CLOSE': 'MENU'}}</div>
        </span>
        </div>
    </div>
    <!-- 主体内容 -->
    <div class="main-content">
        <div class="main-focus" style="background-image: url(../../images/top_banner_3.jpg)">
            <div class="inner">
                <h3>表格下载</h3>
                <p>Form Download</p>
            </div>
        </div>
        <div class="main-crumb van-hairline--top-bottom">
            <span>当前位置</span>
            <em>>></em>
            <a href="../staff_service.html">员工服务</a>
            <em>>></em>
            <a href="../staff_service/faq_download.html">常见问题和表格下载</a>
            <em>>></em>
            <span>表格下载</span>
        </div>
        <div class="main-short-title" style="padding: 5px 0 2px;">
            <h3 class="m-title s-tc">表格下载</h3>
            <p class="m-info">提供养老保险，医疗保险、失业保险、生育保险，失业保险、住房公积金等社保的常用表格下载。</p>
        </div>
        <div class="forms-download-wrap">
            <ul class="forms-download-list">
                <li class="list-item" v-for="(item, index) in downloads[curr-1]" :key="item.id">
                    <a :href="item.url" :download="item.title" v-html="item.title"></a>
                </li>
            </ul>
            <div class="main-pagination-nav s-tc">
                <van-pagination v-model="curr" :total-items="total" :items-per-page="pageSize" @change="handleChangePagination">
                    <template #prev-text>
                        <van-icon name="arrow-left"></van-icon>
                    </template>
                    <template #next-text>
                        <van-icon name="arrow"></van-icon>
                    </template>
                    <template #page="{ text }">{{ text }}</template>
                </van-pagination>
            </div>
        </div>
        <!-- footer -->
        <div class="main-footer">
            <div class="f-hd s-tc">
                <h3>西安外国企业服务有限公司</h3>
                <p>西安外国企业服务有限公司（即XAFESCO，以下简称 “西安外服”）是港股主板上市公司万宝盛华大中华旗下的控股公司。原西安外服于1997年经西安市人民政府批准成立的专业人力资源服务公司。是政府指定为外国企业以及港澳台企业在西安设立常驻代表机构提供承办服务及人力资源服务的专业公司。</p>
            </div>
            <ul class="f-nav s-tc">
                <li><a href="../enterprise_service.html">企业服务</a></li>
                <li><a href="../staff_service.html">员工服务</a></li>
                <li><a href="../job.html">招聘求职</a></li>
                <li><a href="../government_solutions.html">政策服务</a></li>
                <li><a href="../about_us.html">关于我们</a></li>
            </ul>
            <div class="f-ewm s-tc">
                <div class="ewm-item">
                    <img src="../../images/ewm.png">
                    <p>关注我们</p>
                </div>
            </div>
            <div class="f-bd s-tc">
                <div class="logo">
                    <img src="../../images/logo_f.png">
                </div>
                <p class="p1">http://www.xafesco.com<br>西安市碑林区和平路118号和平银座908-910室（大差市十字西南角）</p>
                <p class="p2">备案号：123456789</p>
            </div>
        </div>
    </div>
</div>
<script src="../../lib/jquery-3.4.1.min.js"></script>
<script src="../../lib/vue.min.js"></script>
<script src="../../lib/vant/vant.min.js"></script>
<script src="../../js/common.js"></script>
<script>
    var datas = [
        {
            "id": 13001,
            "url": "../../static/工伤认定申请表.doc",
            "title": "工伤认定申请表"
        },
        {
            "id": 13002,
            "url": "../../static/离职-辞职申请.docx",
            "title": "离职-辞职申请"
        },
        {
            "id": 13003,
            "url": "../../static/离职-解除劳动合同证明.doc",
            "title": "离职-解除劳动合同证明"
        },
        {
            "id": 13004,
            "url": "../../static/离职-解除劳务协议证明-实习生.doc",
            "title": "离职-解除劳务协议证明-实习生"
        },
        {
            "id": 13005,
            "url": "../../static/离职-协商解除劳动关系协议书.doc",
            "title": "离职-协商解除劳动关系协议书"
        },
        {
            "id": 13006,
            "url": "../../static/入职-劳务工资料表.docx",
            "title": "入职-劳务工资料表"
        },
        {
            "id": 13007,
            "url": "../../static/入职-派遣劳动合同.doc",
            "title": "入职-派遣劳动合同"
        },
        {
            "id": 13008,
            "url": "../../static/入职-学生实习协议.doc",
            "title": "入职-学生实习协议"
        },
        {
            "id": 13009,
            "url": "../../static/入职-员工管理规定.doc",
            "title": "入职-员工管理规定"
        },
        {
            "id": 13010,
            "url": "../../static/入职-员工资料表.docx",
            "title": "入职-员工资料表"
        },
        {
            "id": 13011,
            "url": "../../static/失业待遇申请表.doc",
            "title": "失业待遇申请表"
        }
    ];
    new Vue({
        el: '#formsDownloadPage',
        mixins: [commonMixin],
        data: function ()  {
            return {
                pageSize: 7,
                curr: 1,
                total: 0,
                downloads: [],
            }
        },
        mounted: function () {
            var that = this;
            this.$nextTick(function () {
                if(Array.isArray(datas)) {
                    that.total = datas.length;
                    that.downloads = that.sliceArray(datas, that.pageSize);
                }
            })
        },
        methods: {
            sliceArray: function(array, size) {
                var resultArray = [];
                for (var i = 0; i < Math.ceil(array.length / size); i++) {
                    var start = i * size;
                    var end = start + size;
                    resultArray.push(array.slice(start, end));
                }
                return resultArray;
            },
            handleChangePagination: function () {
                $('.main-content').scrollTop(0);
            }
        }
    })
</script>
</body>
</html>
